
<!DOCTYPE html>

<html>
    <head>
        <meta charset=UTF-8>
        <title>Visual Sort</title>
        
        <style>@import url("prettify/prettify.css");</style>
        <script src="prettify/prettify.js"></script>
        
        <style>
            @import url("style.css");
            
            body {
                background-color: hsl(134, 100%, 30%)
            }
            
            #header hgroup
            {
                width: 1400px;
            }
            
            #nav .inner,
            #nav ul
            {
                width: 1400px;
            }
            #nav ul li a
            {
                width: 200px;
            }
            #nav ul li a:target
            {
                background: rgba(255, 255, 255, 0.8);
            }

            
            #main
            {
                display: -webkit-box;
                display: -moz-box;
                display: box;
                width: 1400px;
                border-left: 1px solid #ccc;
                border-right: 1px solid #ccc;
            }
            
            #visual
            {
                padding: 10px;
                width: 700px;
                border-right: 1px solid #ccc;
            }
            
            #code
            {
                padding: 10px;
                width: 700px;
            }
            
            canvas, .prettyprint {
                display: block;
                box-shadow: 0px 0px 8px 0px #aaa;
                width: 640px;
            }
            
            button {
                margin: 5px;
                padding: 2px 10px;
            }
        
        </style>
        
        <script src="script.js"></script>

    </head>
    
    <body>
        <header id="header">
            <hgroup>
                <h1>Visual Sort</h1>
                <h2>
                    思いつきで作ってみました. ナビにあるソート名を押すと対応するソートが始まります. 個人的には Bidirectional Bubble Sort が好き♪
                </h2>
            </hgroup>
            <nav id="nav">
                <div class="inner">
                    <ul>
                        <li><a class="sort-button" href="#bubble" id="bubble">Bubble Sort</a></li>
                        <li><a class="sort-button" href="#selection" id="selection">Selection Sort</a></li>
                        <li><a class="sort-button" href="#bidirectionalBubble" id="bidirectionalBubble">Bidirectional Bubble Sort</a></li>
                        <li><a class="sort-button" href="#quick" id="quick">Quick Sort</a></li>
                    </ul>
                </div>
            </nav>
        </header>
        
        <div id="contents">
            
            <section id="main">
                
                <section id="visual">
                    <h2>Visual</h2>
                    <canvas id="c" width=640 height=480 ondblclick="reset();"></canvas>
                    <div>
                        <button onclick="start();">Start</button>
                        <button onclick="reset();">Reset</button>
                    </div>
                </section>
                
                <section id="code">
                    <h2>Code</h2>
                    <pre id="p" class="prettyprint">
#include &lt;stdio.h&gt;

int mian()
{
    return 0;
}
                    </pre>
                </section>
                
            </section>
            
        </div>
        
        <footer id="footer">
            <p>
                <a href="http://tmlife.net">Home</a>
            </p>
            <address>Copyright &copy; 2011 phi. All Rights Reserved.</address>
        </footer>

    </body>
</html>


